<template>
  <view>
    <view class="cu-custom" :style="[{ height: CustomBar + 'px' }]">
      <view class="cu-bar fixed" :style="style" :class="[bgImage != '' ? 'none-bg text-white bg-img' : '', bgColor]">
        <view class="action" @tap="BackPage" v-if="isBack">
          <text class="cuIcon-back"></text>
          <slot name="backText"></slot>
        </view>
        <view class="content" :style="[{ top: StatusBar + 'px' }]">
          <slot name="content"></slot>
        </view>
        <view class="text-right rstr" @click="goTourl">
          <slot name="rightname"></slot>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      StatusBar: this.StatusBar,
      CustomBar: 40
    };
  },
  name: 'cu-custom',
  computed: {
    style() {
      var StatusBar = this.StatusBar;
      var CustomBar = this.CustomBar;
      var bgImage = this.bgImage;
      var style = `height:${CustomBar}px;padding-top:${StatusBar}px;`;
      if (this.bgImage) {
        style = `${style}background-image:url(${bgImage});`;
      }
      return style;
    }
  },
  props: {
    bgColor: {
      type: String,
      default: ''
    },
    isBack: {
      type: [Boolean, String],
      default: false
    },
    bgImage: {
      type: String,
      default: ''
    },
    url: {
      type: String,
      default: ''
    },
    kefu: {
      type: Boolean,
      default: false
    },
    mobile: {
      type: String,
      default: ''
    }
  },
  methods: {
    BackPage() {
      uni.navigateBack({
        delta: 1
      });
    },
    goTourl() {
      let url = this.url;
      if (url == '' && this.kefu) {
        var that = this;
        uni.makePhoneCall({
          phoneNumber: that.mobile,
          success: (res) => {
            console.log('调用成功!');
          },
          fail: (res) => {
            console.log('调用失败!', res);
          }
        });
      }
      if (url != '') {
        uni.navigateTo({
          url: url
        });
      }
    }
  }
};
</script>

<style>
.rstr {
  height: 30px;
  font-size: 14px;
  line-height: 30px;
  cursor: none;
  margin-right: 20upx;
}
</style>
